<template>
	<div class="userList">
		<div class="checkAll">
			<el-checkbox
				v-if="filterData.length"
				:indeterminate="selectIds.length>0 && selectIds.length<allIds.length"
				:value="checkAll"
				@change="handleCheckAllChange"
				>全选</el-checkbox
			>
		</div>
		<div class="scroll-warp">
			<el-checkbox-group v-model="selectIds" @change="handleCheckedChange">
				<template v-for="(item,index) in filterData">
					<div v-if="deferFn2.defer(index)" class="itemBox" :key="item.F_UserId">
						<el-checkbox :label="item.F_UserId" :key="item.F_UserId">
							<div class="list-item">
								<div class="headImg">
									<img :src="item.F_HeadIcon" />
								</div>
								<span class="user-name">{{ item.F_RealName }}</span>
							</div>
						</el-checkbox>
					</div>
				</template>
			</el-checkbox-group>
		</div>
	</div>
</template>

<script>
import { store } from "../storeData.js"
import { debounce,renderDefer,mixinsDefer } from "../utils";

export default {
    name: "UserList",
    mixins:[mixinsDefer],
    props: {
        value: {
            type: Array,
            default: () => []
        },
        keyWords: {
            type: String,
            default:""
        }
    },
    data() {
        const data = store.userData;
        window.userData = data;
        const deferFn = renderDefer()
        return {
            data,
            selectIds: [],
            allIds: [],
            filterData: [],
            check: false,
            deferFn,
            deferFn2:this.renderDefer(data.data.length)
        }
    },
    watch: {
        "data": {
            handler(v) {
                console.log("变化")
                const all = [];
                v.data.forEach(item => {
                    all.push(item.F_UserId);
                });
                this.filterData = v.data;
                this.allIds = all;
            },
            immediate: true,
            deep: true,
        },
        "value": {
            handler(v) {
                this.selectIds = v;
            },
            immediate:true,
        },
        "keyWords": {
            handler: debounce(function(v){
                //* 过滤数据
                    if (!v.trim()) {
                        this.filterData = this.data.data;
                        return
                    }
                    this.filterData = this.data.data.filter((item) => item.F_RealName.indexOf(v) > -1);
              })
        }
    },
    computed: {
        checkAll:{
            get:function(){
                if (this.selectIds.length > 0 && this.selectIds.length == this.allIds.length) {
                return true;
                }
                return false;
            },
            //* 判断是否过滤出来数据

        }
    },
    methods: {
      handleCheckAllChange(val) {


        // if(val){
        //    this.check = true;
        //    const taskAll = this.allIds.filter((item)=>!this.selectIds.includes(item));
        //    const taskRun =async ()=>{
        //        await sleep(10.5);
        //        this.selectIds = this.selectIds.concat(taskAll.splice(0, 30));
        //         if (taskAll.length>0) {
        //             taskRun();
        //         } else {
        //             this.check = false;
        //             this.$emit("input", this.selectIds);
        //             this.$emit("select","Users",this.selectIds)
        //         }
        //     }

        //     taskRun();

        // } else {
        //     this.selectIds = [];
        //     requestIdleCallback(() => {
        //             this.$emit("input", this.selectIds);
        //             this.$emit("select","Users",this.selectIds)
        //     })
        //     this.check = false;
            // }

          this.selectIds = val ? this.allIds.slice() : [];
            requestIdleCallback(() => {
                    this.$emit("input", this.selectIds);
                    this.$emit("select","Users",this.selectIds)
            })
            // this.$emit("input", this.selectIds);
            // this.$emit("select","Users",this.selectIds)
      },
        handleCheckedChange() {
                console.log("执行")
                // requestIdleCallback(() => {
                this.$emit("input", this.selectIds);
                this.$emit("select","Users",this.selectIds)
                // })
                // requestAnimationFrame(()=>{
                //     this.$emit("input", this.selectIds);
                //     this.$emit("select","Users",this.selectIds)
                // })
                // setTimeout(() => {
                //     this.$emit("input", this.selectIds);
                //     this.$emit("select","Users",this.selectIds)
                // },50);
                console.log("执行----2")
       },
      changeItem() {
            // if (!v) {
            //     this.check = false;
            // }
        },

    },
    beforeDestroy() {
        this.deferFn2.clearDefer();
    }
}
</script>
<style lang="scss" scoped>

.userList{
   width: 100%;
   height: 100%;
   display: flex;
   flex-direction: column;

   .checkAll{
      height: 40px;
      flex-shrink: 0;
      display: flex;
      box-sizing: border-box;
      padding: 10px 5px;
   }
   .scroll-warp{
      height:100%;
      overflow-y: auto;
      overflow-x: hidden;
      .itemBox{
         width:100%;
         height:40px;
         display:flex;
         align-items:center;
         box-sizing:border-box;
         padding:0px 5px;
         &:hover{
            background-color:#eee;
            border-radius:4px;

         }
         ::v-deep(.el-checkbox){
            display:flex;
            width:100%;
            height:100%;
            align-items:center;
         }

         .list-item{
            display:flex;
            height:100%;
            align-items:center;
            .headImg{
                width:32px;
                height:32px;
                border-radius:4px;
                overflow:hidden;
                margin-right:6px;
                img {
                    width:100%;
                    height:100%
                }
            }

         }
      }

   }
}
</style>
